<template>
    <p>count: {{ count }}</p>


    <p>reactive========</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <p>arr:{{ arr }}</p>
    <p>arr[1]:{{ arr[1] }}</p>
    <p>computed=============</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>objAgeAddFive:{{ objAgeAddFive }}</p>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">更新obj</button>

    <SonDemo  foo="hello world" :age="count"/>
</template>

<script setup>
import { ref,reactive,computed,watch} from "vue";
import SonDemo from './SonDemo.vue'

const count =ref(1)

console.log(count);
console.log(count.value);

//reactive
const obj =reactive({
    name:'tom',
    age:12
})

const arr =reactive([1,2,3,4])


//computed
const countAddFive = computed(()=>{
    return count.value + 5
})

const objAgeAddFive = computed(()=>{
    return obj.age + 5
})

function countAddOne() {
    count.value++
}
const countAddTwo = () =>{
    count.value += 2
}
const updateObj = () =>{
    upadteObjName()
}
const upadteObjName = () =>{
    obj.name = 'jerry'
}

watch(count,(newVal,oldVal)=>{
    console.log(newVal);
    console.log(oldVal);
})
</script>